<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
    <style> 
      .swiper {
          width: 100%;
          height: 150px;
      }

      .tab {
          width: 100%;
          height: 150px;
      }

      .point-box {
          margin:auto;
          position: relative;
          bottom: 20px;
          height: 5px; 
          width:20px;
      }

      .point {
          margin:auto;
          height: 5px;
          width: 5px;
          border-radius: 100px;
          background-color:gray; 
          float: left;
      }

    </style>

    <div class="swiper"> 
        <content></content>
    </div>

</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        var element = Object.create(HTMLElement.prototype); 
        // Fires when an instance of the element is created
        var nodeDocument = document.currentScript.ownerDocument;
        element.createdCallback = function() {
            // Gets content from <template>  
            var template = nodeDocument.querySelector('template').content;  
            
            var shadowRoot = this.createShadowRoot();
            // Adds a template clone into shadow root
            var clone = document.importNode(template, true); 
            //console.log(shadowRoot.)
            shadowRoot.appendChild(clone);
        };
        document.registerElement('wx-swiper', {
            prototype: element
        });
    }());
</script>